<template>
  <view class="content" @tap="moreshowClose">
    <view class="shopInfo">
      <view class="topImg flexB"
      :style="{ backgroundImage: 'url(' + shopdetails.merchantHead + ')' }" @tap="preview(shopdetails.merchantHead)">
       <view class="word"></view>
        <view class="topLeft" :style="'margin-top:' + statusBarHeight + 'px;'" @tap.stop="back">
          <u-icon name="arrow-left" color="#fff" size="40"></u-icon>
        </view>
        <!-- <view class="topRight" :style="'margin-top:' + statusBarHeight + 'px;'">
					<text class="icon fs-36" style="color:#FFF;" @tap="phoneClick">&#xe74c;</text>
					<block v-if="hasCollect">
						<text class="icon fs-36" style="color:red;" @tap="collectionClick('hasCollect')">&#xe612;</text>
					</block>
					<block v-else>
						<text class="icon fs-36" style="color:white;"
							@tap="collectionClick('notCollect')">&#xe78c;</text>
					</block>
					<view class="p-relative">
						<text class="icon fs-36" style="color:#FFF;" @tap.stop="moreclick">&#xe708;</text>
						<view v-show="moreShow" class="p-absolute bgWhite"
							style="left:-137rpx; top:60rpx; z-index:999; box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.2);border-radius: 12rpx ;">
							<view class="moreItem" @tap="shareShops">
								<text>分享商家</text>
							</view>
							<view class="moreItem" @tap="phoneClick">
								<text>联系商家</text>
							</view>
							<view class="moreItem">
								<text v-if="hasCollect" @tap="collectionClick('hasCollect')">取消收藏</text>
								<text v-else @tap="collectionClick('notCollect')">收藏商家</text>
							</view>
							<view mode="bottom" @tap="openReport" class="moreItem">
								<text>举报商家</text>
							</view>
						</view>
					</view>
				</view> -->
      </view>
      <view class="shopBox">
        <view class="shopName">
          <view class="shopAddress">{{ shopdetails.merchantName }}</view>
          <view class="shopTime">
            <text>营业时间：{{ shopdetails.merchantTime }}</text>
          </view>
          <view class="announcement">
            <text>公告：{{ shopdetails.merchantIntroduce }}</text>
          </view>
          <!-- <view class="distriBution">
            <text v-if="this.distance < 1">{{ parseFloat(distance*1000).toFixed(2) }} m</text>
            <text v-if="this.distance > 1">约{{ parseFloat(distance).toFixed(2) }}km</text>
            <text class="shoptext">|</text>
            <text class="shoptext">{{ shopdetails.merchantAddress }}</text>
          </view> -->
         
        </view>
        <view class="shopImg">
          <image
            :src="shopdetails.merchantHead"
            alt @tap="preview2(shopdetails.merchantHead)"/>
        </view>
      </view>
      <!-- tab栏切换动态改变激活样式 -->
      <view class="shopNav">
        <view class="nav">
          <view class="nav-list" v-for="(item, index) in navList" :key="item.id" @tap="changeAct(item)">
            <!-- 激活样式名字是红色 判断act==index 和act==item.id都行-->
            <view :class="[act == index ? 'name' : '']">
              <text>{{ item.name }}</text>
            </view>
            <!-- 名字下面的横线 -->
            <view :class="[act == index ? 'line' : '']"></view>
          </view>
        </view>
      </view>
    </view>
    <!-- 评论 -->
    <view class="contenttabs pad32" v-if="content && content.id === 1">
      <view class="comments" v-for="(item, index) in commentslist" :key="index">
        <view class="commentone">
          <image class="avatar" :src="item.img" mode="scaleToFill" />
          <view class="flexColumn fs-28 fw-700">
            <view style="padding-left: 10rpx;">
              <text>{{ item.name }}</text>
            </view>
            <u-rate :count="count" v-model="item.rate" disabled size='28'></u-rate>
          </view>
          <view class="datatime">
            2024-6-20
          </view>
        </view>

        <view class="commenttwo">{{ item.title }}</view>
        <view class="commentthree">
          <view v-for="(item, index) in item.imagelist" :key="index" :class="item.id % 3 === 0 ? '' : 'your-class'">
            <image :src="item.img" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </view>
    <!-- 详情 -->
    <view class="contenttabs pad32" v-else>
      <view>
        【商品图片】
      </view>
      <view style="margin:18rpx 0 0 70rpx;">
        <image
          style="width: 150rpx;height:150rpx; border-radius:35rpx;"
          :src="productMaterial.productImg"
          mode="scaleToFill" @tap="preview3(productMaterial.productImg)"
        />
      </view>
      <view >
        【产品名称】
      </view>
      <view style="margin:18rpx 0 18rpx 70rpx;">
        {{ productMaterial.productName }}
      </view>
      <view >
        【产品价格】
      </view>
      <view style="margin:18rpx 0 18rpx 70rpx;">
        {{ productMaterial.productPrice /100 }}
      </view >
      <view >
        【产品须知】
      </view>
      <view>
        <pre style="margin:18rpx 0 18rpx 70rpx; white-space: pre-wrap;" hover-class="none" hover-stop-propagation="false" v-html="aa">
                        </pre>
      </view>
      <view >
        【预约规则】
      </view>
      <view style="margin:18rpx 0 18rpx 70rpx;">
        {{ productMaterial.remake }}
      </view>
    </view>
    <!-- 举报商家 -->
    <!-- 举报商家 -->
    <u-popup v-model="reportpop" mode="bottom" border-radius='12'>
      <view class="report">
        <view class="flexB">
          <view class="fs-32">
            举报内容
          </view>
          <view class="" @tap="reportpop = false">
            <u-icon name="close" color="#7A7D99" size="28"></u-icon>
          </view>
        </view>

        <u-form :model="reportForm" ref="uForm">
          <u-form-item label-width="150" label="举报类型" prop="choose"
            style="padding: 0 24rpx; border:1rpx solid #ccc;  margin-top:24rpx;  border-radius:12rpx;">
            <view @tap="reportFormTypeShow = true" style="display:flex; width:100%; justify-content: space-between;">
              <text>{{ reportForm.choose }}</text>
              <text class="icon">&#xe62d;</text>
            </view>
          </u-form-item>
          <u-form-item label-width="150" label="下单状态"
            style="padding: 0 24rpx; border:1rpx solid #ccc;  margin-top:24rpx;  border-radius:12rpx;">
            <view style="display:flex; width:100%;">
              <view @tap="orderSelect = 0" style="margin:0 28rpx; display:flex; align-items:center;">
                <image src="/static/image/radioSelect.png" mode="" v-if="orderSelect == 0"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <image src="/static/image/radionoSelect.png" mode="" v-if="orderSelect != 0"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <text>已下单</text>
              </view>
              <view @tap="orderSelect = 1" style="display:flex; align-items:center;">
                <image src="/static/image/radioSelect.png" v-if="orderSelect == 1"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <image src="/static/image/radionoSelect.png" v-if="orderSelect != 1"
                  style="width: 34rpx;height: 34rpx;margin-right: 18rpx;"></image>
                <text>未下单</text>
              </view>
            </view>
          </u-form-item>
          <u-form-item label-width="150" label="" prop="uploadimg"
            style="padding: 0;margin-top:24rpx;border-radius: 12rpx;display: flex;flex-warp: warp;">
            <view class="pre-box">

              <u-upload :custom-btn="true" @on-choose-fail="onChooseFail" :before-remove="beforeRemove" ref="uUpload"
                :show-upload-list="true" :action="action" :auto-upload="true" :file-list="fileList"
                :show-progress="true" :deletable="true" :header="uploadToken" :max-count="6"
                @on-list-change="onListChange" :on-remove="uploadRemove" @on-success="uploadSuccess" :size-type="['compressed']" :max-size="FileSize">
                <view slot="addBtn">
                  <image src="/static/image/upload_icon.png" mode=""
                    style="width: 160rpx;height: 150rpx;border-radius: 12rpx;"></image>
                </view>
              </u-upload>
            </view>

          </u-form-item>
          <u-form-item label="电话" prop="iphone"
            style="padding: 0 24rpx; border:1rpx solid #ccc;   border-radius:12rpx;">
            <u-input placeholder="请输入电话" v-model="reportForm.iphone" maxlength="11" />
          </u-form-item>
          <u-form-item label="" prop="textinput"
            style="padding: 0 24rpx; border:1rpx solid #ccc; margin-top:24rpx; border-radius:12rpx;">
            <u-input placeholder="请填写举报内容" v-model="reportForm.textinput" type="textarea" :height="100"
              :auto-height="true" />
          </u-form-item>
        </u-form>

      </view>
      <view style="margin: 0 32rpx 200rpx 32rpx;">
        <u-button style="border-radius: 1998rpx ;" @tap="reportSubmit" type="error">确定</u-button>
      </view>
    </u-popup>
    <u-popup v-model="reportcen" mode="center" border-radius="14">
      <view style="width: 670rpx; height: 436rpx;">
        <view style="margin:40rpx 32rpx 80rpx 32rpx; display:flex; justify-content:space-between;">
          <view>举报完毕</view>
          <view @tap="reportclose">
            <u-icon name="close"></u-icon>
          </view>
        </view>
        <view
          style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 28rpx;color: rgba(0,0,0,0.5); text-indent: 2em; margin:0 32rpx;">
          感谢您的配合，经核实举报内容信息真实后，平台将对商家进行处罚</view>
        <view style="margin:80rpx 62rpx 40rpx 62rpx; ">
          <u-button style="border-radius: 1998rpx ;" @tap="reportclose" type="error">确定</u-button>
        </view>
      </view>
    </u-popup>
    <!-- 举报商家 类型 -->
    <u-picker mode="selector" v-model="reportFormTypeShow" :default-selector="[0]" :range="reportFormTypeSelector"
      @confirm='reportFormTypeConfirm' range-key="name"></u-picker>

      <ykAuthpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CALL_PHONE"></ykAuthpup>
  </view>
</template>

<script>
import { collectMerchant, selectEvaluate, insertReport, selectMerchant, createOrder ,selectProductById, IsMerchant as IsMerchantReq } from '@/api/common'
import { BASE_URL_IMG } from '@/api/request'
import { FileSize } from '@/common/fileSize';
import ykAuthpup from '@/components/yk-authpup/yk-authpup.vue'
let that = null;
export default {
  components: {
    ykAuthpup
  },
  data() {
    return {
      phoneAuth:'',
      FileSize,
      hasCollect: false, //是否已经收藏店铺
      reportFormTypeShow: false, //举报商家 类型
      reportFormTypeSelector: [
        {
          id: 1,
          name: '刷销量'
        },
        {
          id: 2,
          name: '刷评价'
        },
        {
          id: 3,
          name: '引导收藏,转单'
        },
        {
          id: 4,
          name: '其他'
        },
      ],
      reportForm: {
        iphone: null, //电话
        choose: '',
        orderstatus: '',
        textinput: ''
      }, //投诉商家form
      action: null,
      reportpop: false,
      listorders: [{
        title: "已下单"
      },
      {
        title: "未下单"
      }
      ],
      valuereport: "已下单",

      reportRules: {
        iphone: [{
          type: "number",
          required: true,
          message: "请输入手机号",
          trigger: ["change", "blur"]
        },
        {
          // 自定义验证函数，见上说明
          validator: (rule, value, callback) => {
            // 上面有说，返回true表示校验通过，返回false表示不通过
            // this.$u.test.mobile()就是返回true或者false的
            return this.$u.test.mobile(value);
          },
          maxlength: 11,
          message: "手机号码不正确",
          // 触发器可以同时用blur和change
          trigger: ["blur"]
        }
        ]
      },
      reportcen: false,
      action: "",
      orderSelect: 0,
      id: '', //从页面跳转获取id,再进行获取数据
      moreShow: false,
      reportpop: false,
      statusBarHeight: 0,
      backaddlist: [], //选择的收货地址
      selectTime: null,
      selectTimeshow: false,
      count: 5,
      rate: 3.8,
      act: 0,
      navList: [{
        id: 0,
        name: "商品详情",
      },
      {
        id: 1,
        name: "用户评价"
      }
      ],
      content: null,
      ServiceList: [
        '响应及时快速，服务周到；', '主营家用定频、变频空调，空调挂机柜机的空的 调移机、空调拆装、空调加氯等服务；', '空调拆装；'
      ],
      //评论数据
      commentslist: [],
      fileList: [],
      uploadToken: {
        Authorization: '',
      },
      nowFileList: [],
      datatype: 0,
      pageNum: 1,
      pageSize: 10,
      pagesStatus: false,
      merchantId: '',
      shopdetails: [],
      productId:'',
      aa: '',
      productMaterial: [],
      distance:""
    }
  },
  onReady() { },
  onLoad() {
    this.action = BASE_URL_IMG
    console.log('BASE_URL', this.action);
    this.uploadToken.Authorization = uni.getStorageSync('token')
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    console.log('导航栏高度:', that.statusBarHeight);
    const eventChannel = this.getOpenerEventChannel()
    let eventTriggered =false
    eventChannel.on("redactInfo",function(data){
      console.log('redactInfo',data)
      that.shopdetails=data.info.shopdetails
      that.productId=data.info.productId
      that.distance=data.info.distance
      console.log('productId',that.productId)
      eventTriggered = true;
      if(eventTriggered){
        that.getshopvalue()
      }
    })
    // this.getshoplist()
    if(this.uploadToken.Authorization != "") {
      this.IsMerchant()	
    }
  },

  methods: {
    IsMerchant() {
	  		  IsMerchantReq({ merchantId: this.shoplistid }).then(res => {
				  if (res.data.favoriteMerchant == 1) {
				    this.hasCollect = true
				  } else {
				    this.hasCollect = false
				  }
	  		  })
	  },
    preview(img) {
      uni.previewImage({
        urls: [img]
      })
    },
    preview2(img) {
      uni.previewImage({
        urls: [img]
      })
    },
    preview3(img) {
      uni.previewImage({
        urls: [img]
      })
    },
    // 返回
    back() {
      uni.navigateBack()
    },
    moreshowClose() {
      if (this.moreShow) {
        this.moreShow = false
      }
    },
    // 更多
    moreclick() {
      this.moreShow = !this.moreShow;
    },

    // 举报商家事件
    openReport() {
      this.reportpop = true;
      this.reportForm.iphone = ''
      this.reportForm.choose = ''
      this.reportForm.orderstatus = ''
      this.reportForm.textinput = ''
      this.lists = []
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      console.log(this.$refs);
      if(this.uploadToken.Authorization) {
        this.$nextTick(() => {
          that.$refs.uForm.setRules(that.reportRules);
        });
      } else {
        let fromPage=true
        uni.redirectTo({
          url: `/pages/login/login?fromPage=${fromPage}`
        })	
      }
    },
    getreport() {
      let obj = {
        // reportType: 1,
        // reportOrderStatus: 1,
        // reportContents: '为什么没有举报',
        // userPhone: '13333333333'
        reportType: this.orderSelect,
        reportOrderStatus: this.datatype,
        reportContents: this.reportForm.textinput,
        reportImg: this.nowFileList,
        userPhone: this.reportForm.iphone
      }

      insertReport(obj).then(res => {
        console.log('举报商家数据看看看', res)
        this.reportpop = false;
      })
    },
    onListChange(lists) {
      console.log('onListChange', lists);
      this.lists = lists;
    },
    uploadSuccess(e) {
      this.nowFileList.push(e.data)
      console.log("aaa", e);
    },
    uploadRemove(e) {
      // this.nowFileList.push(e.data)
      console.log("aaa", e);
    },
    beforeRemove(index, lists) {
      console.log("aaa", this.lists[index]);
    },
    onChooseFail(e) {
      console.log(e);
    },
    reportclose() {
      this.reportcen = false;
      this.more = false;
      this.reportpop = false;
      this.form.iphone = null
    },
    reportFormTypeConfirm(data) {
      this.datatype = this.reportFormTypeSelector[data].id
      this.reportForm.choose = this.reportFormTypeSelector[data].name
      console.log('看看typedata', this.datatype);
    },
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    // 投诉商家
    reportSubmit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.reportcen = true;
          this.reportpop = false;
          this.getreport()
          console.log("验证通过");
        } else {
          console.log("验证失败");
        }
      });
      let files = [];
      // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
      files = this.$refs.uUpload.lists.filter(val => {
        return val.progress == 100;
      });
      // 如果您不需要进行太多的处理，直接如下即可
      // files = this.$refs.uUpload.lists;
      console.log('看看这个files', files);

    },
    // 收藏
    collectionClick() {
      let obj = {
        // merchantId:"1181b1fd01624ec2bcdd1707a62f15d9",
        merchantId: this.merchantId
      }
      collectMerchant(obj).then(res => {
        console.log('收藏', res)
        this.hasCollect = !this.hasCollect
        this.$u.toast(res.data);
      })
    },
    //评论接口
    getcommentslist() {
      let obj = {
        merchantId: '12',
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // merchantId:this.shoplistid
      }
      selectEvaluate(obj).then(res => {
        console.log('评论', res.data.length, this.pageNum)
        res.data.forEach(item => {
          item.evaluateImageList = item.evaluateAge.split(',')

        });

        if (this.pageNum === 1) {
          this.commentslist = res.data
        } else {
          this.commentslist = this.commentslist.concat(res.data)
        }
        if (res.data.length < 10) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
        console.log(this.commentslist)
      })
    },
    //看看店铺详情
    getshoplist() {
      console.log(this.merchantId, '看看id传过来了吗')
      let obj = {
        merchantId: this.merchantId,
      }
      selectMerchant(obj).then(res => {
        this.shopdetails = res.data
        console.log('看看', this.shopdetails)
        let merchantIntroduce = this.productMaterial
        merchantIntroduce = merchantIntroduce.replace(/\n/g, '<br>');
        this.aa = merchantIntroduce
      })
    },
    // 商品详情
    getshopvalue(){
      let obj = {
        productId:this.productId
      }
      selectProductById(obj).then(res=>{
        console.log('商品详情',res)
        let merchantIntroduce = res.data.productMaterial
        merchantIntroduce = merchantIntroduce.replace(/\n/g, '<br>');
        this.aa = merchantIntroduce
        this.productMaterial = res.data
        console.log('this.productMaterial',this.productMaterial);
      })
    },
    // 分享商家
    shareShops() {

    },
    changeAuth(){
			//这里是权限通过后执行自己的代码逻辑
			console.log('权限已授权，可执行自己的代码逻辑了');
      let that = this
    uni.makePhoneCall({
          phoneNumber: that.phoneAuth || "15952011111"
        });
        if (plus && plus.device) {
          plus.device.dial(that.phoneAuth || "15952011111", true);
        }
		},
    // 打电话
    phoneClick(phone) {
      this.phoneAuth = phone
       this.$refs['authpup'].open();
    },
    changeAct(item) {
      // 激活样式是当前点击的对应下标--list中对应id
      this.act = item.id;
      // 可以根据点击事件改变内容
      this.content = item;
      if (item.id == 1) {
        this.pageNum = 1
        this.pagesStatus = false
        this.getcommentslist()
      }
    },

    // 选择商品
    goodsItemClick(item) {
      console.log(item, '选择商品')
      this.goodAct = item;
    },
    // 选择商品规格
    goodSpecClick(ind) {
      this.goodSpecAct = ind
    },
    // 选择地址
    selectAddressClick() {
      uni.$once('nextStep', function (e) {
        that.backaddlist = e
        console.log(that.backaddlist[0].backchoose, '看看我获取到没')
        that.addshow = that.backaddlist[0].backchoose
        console.log(that.addshow, '看看我获取到没1111111111111111')
      })
      uni.navigateTo({
        url: "/pagesMine/mineAddress"
      });
    },
    // 选择上门时间
    selectTimeClick() {
      this.selectTimeshow = true
    },
    selectTimeConfirm(time) {
      this.selectTime = time.year + '-' + time.month + '-' + time.day + ' ' + time.hour + ':' + time.minute +
        ':' + time.second
      console.log(time, 'xianshi deshuju', this.selectTime)
    },
    // 支付订单
    ordersshow() {
      console.log(this.form)
    }
  },
  // 下拉加载
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.getcommentslist()
    }
  },
}
</script>

<style scoped lang="scss">
@import "@/api/main.css";

.goodSpecActCss {
  padding: 8px 18rpx;
  color: #ffffff;
  background: #D12C25;
}

.goodSpecNoActCss {
  padding: 8px 18rpx;
  border: 1rpx solid #999999;
  color: #000000;
}

.content {
  // background: #E6E6E6;
  // height: 100vh;
  // display: flex;
  // flex-direction: column;

  ::v-deep .u-navbar::after {
    display: none !important;
  }

  .shopInfo {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .topImg {
    width: 100vw;
    padding: 32rpx 32rpx 80rpx;
    position: relative;

    .word {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.2);
      left: 0;
      top: 0;
      z-index: 2;
    }

    .topLeft {
      width: 48rpx;
      height: 48rpx;
      // background-color: rgba(0, 0, 0, 0.2);
      border-radius: 4rpx;
      padding: 6rpx;
      z-index: 6;
    }

    .topRight {
      display: flex;
      justify-content: space-between;
      width: 168rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }

      .moreimg {
        margin-top: 12rpx;
        width: 36rpx;
        height: 12rpx;
      }

      .moreItem {
        padding: 24rpx 32rpx 18rpx 32rpx;
        border-bottom: 1rpx solid #ccc;
      }
    }
  }

  .shopBox {
    position: relative;
    background: white;
    border-radius: 12rpx 12rpx 0rpx 0rpx;

    .shopName {
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      display: flex;
      flex-direction: column;
      padding: 24rpx 0rpx 18rpx 32rpx;
      width: 500rpx;

      .shopAddress {
        line-height: 50rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;

      }


      .shopTime {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        line-height: 33rpx;
        font-style: normal;
        text-transform: none;
        margin-top: 18rpx;
      }

      .distriBution {
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #999999;
        line-height: 33rpx;
        font-style: normal;
        margin: 18rpx 0rpx;
        display: flex;

        .shoptext {
          margin-left: 16rpx;
        }
      }

      .announcement {

        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #130606;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }

    .shopImg {
      width: 156rpx;
      height: 156rpx;
      position: absolute;
      right: 32rpx;
      top: -24rpx;
      border-radius: 6rpx;
      overflow: hidden;
      z-index: 6;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .shopNav {
    display: flex;
    border-bottom: 1rpx solid #999999;
    background-color: white;
  }

  .nav {
    width: 506rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #ffffff;
  }

  .nav-list {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 38rpx;
    text-align: center;
    font-style: normal;

  }

  .nav-list .name {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #d12c25;
    line-height: 42rpx;
    text-align: center;
    font-style: normal;
  }

  .nav-list .line {
    margin-top: 5rpx;
    width: 64rpx;
    height: 4rpx;
    background-color: red;
    margin-left: 32rpx;
  }

  /* 内容 */
  .contenttabs {
    padding-bottom: 150rpx;

    .comments {
      margin-bottom: 32rpx;
      border-bottom: 1rpx solid #ccc;

      .commentone {
        display: flex;

        .avatar {
          width: 68rpx;
          height: 68rpx;
          background-color: orange;
          margin-right: 16rpx;
          border-radius: 50%;
        }

        .datatime {
          width: 430rpx;
          height: 34rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 28rpx;
          text-align: right;
          font-style: normal;
          text-transform: none;
          margin: 4rpx;
          margin-left: 4rpx;
        }
      }

      .commenttwo {
        margin-top: 24rpx;
      }

      .commentthree {
        display: flex;
        padding: 24rpx 0;
        flex-wrap: wrap;

        image {
          width: 212rpx;
          height: 140rpx;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
        }

        .your-class {
          margin-right: 24rpx;
        }
      }
    }

    .detail {
      // width: 686rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      font-style: normal;

      .title {
        line-height: 33rpx;
        text-align: left;
        margin-bottom: 18rpx;
      }

      .cont {
        text-align: justified;
        text-transform: none;
        text-indent: 32rpx;
        line-height: 33rpx;
        margin-bottom: 32rpx;
      }

      .ServiceListCss {
        padding-left: 33rpx;
        line-height: 33rpx;
        margin-bottom: 32rpx;
      }

      .imgBottom {
        image {
          width: 686rpx;
          height: 356rpx;
          margin-top: 32rpx;
        }
      }

      .shopcar {
        width: 686rpx;
        height: 96rpx;
        position: fixed;
        z-index: 999;
        left: 32rpx;
        bottom: 66rpx;
        background-color: #333333;
        border-radius: 176rpx;
        display: flex;

        .popupbottom {
          position: fixed;
          bottom: 162rpx;
          left: 32rpx;
          z-index: 888;
        }

        .round {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-left: 32rpx;
          margin-top: -26rpx;
          position: relative;

          image {
            width: 120rpx;
            height: 120rpx;
          }

          .shoprightnum {
            width: 32rpx;
            height: 32rpx;
            background: #d12c25;
            position: absolute;
            right: 0;
            z-index: 999;
            top: 0;
            border-radius: 50% 50%;
            line-height: 32rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #ffffff;
            text-align: center;
            font-style: normal;
          }
        }

        .choose {
          width: 360rpx;
          height: 96rpx;
          margin-left: 32rpx;

          .chooseprice {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 40rpx;
            color: #ffffff;
            line-height: 44rpx;
            font-style: normal;
            margin-top: 24rpx;
          }
        }

        .choosebutton {
          width: 174rpx;
          height: 96rpx;
          background: linear-gradient(270deg, #d12c25 0%, #d12c25 100%);
          border-radius: 0rpx 176rpx 176rpx 0rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 32rpx;
          color: #ffffff;
          line-height: 96rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }

  }


  .topPrice {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #D12C25;
    text-align: justified;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: flex-end;
  }



  .goodsImgs {
    margin-right: 34rpx;
    width: 190rpx;

    .goodsImg {
      width: 190rpx;
      height: 144rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
      }
    }
  }

  .inpCss {
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    border: 1rpx solid #999999;
  }

}

.report {
  margin: 0 32rpx 200rpx 32rpx;
  padding: 32rpx 24rpx 0 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;

  .reportlist {
    border: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    margin-top: 24rpx;
    justify-content: space-between;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    padding: 24rpx;
  }
}
</style>